<template>
  <v-layout type="main">
    <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="search-box">
          <el-input
            prefix-icon="el-icon-search"
            v-model="Pagedata.name"
            class="search"
            placeholder
            @input="getData"
          />
        </div>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="model" label="GPU型号">
        <template slot-scope="{ row }">
          <span>{{ row.labels.gpu ? row.labels.gpu : "无显卡" }}</span>
          <el-button type="text" @click="openSetGPU(row)">设置</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="addresses" label="IP地址">
        <template slot-scope="{ row }">
          <span>{{ row.addresses[0].address }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="model" label="操作">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.labels['action'] === 'worker'"
            type="text"
            @click="nodeDown(row)"
          >下线节点</el-button>
          <el-button v-else type="text" @click="upNode(row)">上线节点</el-button>
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="child_tab_box">
            <el-table :data="props.row.child" style="width: 100%">
              <el-table-column prop="instance.create_time" label="创建时间"></el-table-column>
              <el-table-column prop="instance.name" label="名称"></el-table-column>
              <el-table-column prop="businessType" label="类型"></el-table-column>
              <el-table-column prop="instance.event_time" label="开始时间"></el-table-column>
              <el-table-column prop="instance.event_time" label="操作">
                <template slot-scope="scope">
                  <el-button @click="stopItem(scope.row)" type="text">停止</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="设置节点GPU型号" :visible.sync="showSet">
      <div class="add-user-box">
        <el-select v-model="addForm.model" placeholder="选择GPU型号" class="user-lis">
          <el-option v-for="(e, i) in allGpus" :key="i" :label="e.model" :value="e.model" />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setNodeGpu">确定</el-button>
        <el-button class="none-type" @click="showSet = false">关 闭</el-button>
      </span>
    </el-dialog>
  </v-layout>
</template>

<script>
import { getAllGpuModel } from "@/api/gpu";
import {
  getNodelDetail,
  getNodelAll,
  setNodeGpuModel,
  delGpuModel,
  NodelDown,
  NodelUp
} from "@/api/node";
import { formatTime } from "@/utils/tool";

import { stopGameExperiment } from "@/api/gameExperiment";
import { stopGameTaskVersion } from "@/api/gameTask";
import { stopGameSimulation } from "@/api/gameSimulation";
import { stopExperiment } from "@/api/notebook";
import { stopTaskVersion } from "@/api/task";
import { stopServing } from "@/api/deploy";

export default {
  data() {
    return {
      tableData: [],
      addForm: {},
      showSet: false,
      Pagedata: {
        current: 1,
        size: 10,
        total: 0
      },
      allGpus: [],
      array: []
    };
  },
  async created() {
    this.getData();
    this.getGpus();
  },
  destroyed() {},
  methods: {
    async stopItem(row) {
      console.log("row", row);
      let res;
      console.log(row.businessType);
      switch (row.businessType) {
        case "experiment":
        case "webide":
          res = await stopExperiment({ id: row.runningId });
          break;
        case "task":
          res = await stopTaskVersion({ id: row.runningId });
          break;
        case "serving":
          res = await stopServing({ id: row.runningId });
          break;
        case "gameExperiment":
          res = await stopGameExperiment({ id: row.runningId });
          break;
        case "gameTaskVersion":
          res = await stopGameTaskVersion({ id: row.runningId });
          break;
        case "gameserving":
          res = await stopGameSimulation({ id: row.runningId });
      }
      if (res && res.data) {
        this.getData();
      }
      console.log(res);
    },
    // async nodeDetail(row) {
    //   let res = await getNodelDetail({ nodeName: row.name });
    //   console.log("=============", res);
    // },
    async nodeDown(row) {
      console.log("eow", row);

      let res = await NodelDown({ nodeName: row.name });
      console.log(res);
      if (res && res.data) {
        this.$message.success("操作成功");
      }
    },
    // 上线节点
    async upNode(row) {
      let res = await NodelUp({ nodeName: row.name });
      console.log(res);
      if (res && res.data) {
        this.$message.success("操作成功");
      }
    },
    async getData() {
      let res = await getNodelAll();
      const arr = [];
      res.data.forEach(item => {
        arr.push(getNodelDetail({ nodeName: item.name }));
      });
      console.log("arr");

      Promise.all(arr).then(ret => {
        console.log("ret", ret);
        for (let i = 0; i < ret.length; i++) {
          res.data[i].child = [];
          for (let j = 0; j < ret[i].data.length; j++) {
            let item = ret[i].data[j];
            if (item.instance && item.instance.running) {
              res.data[i].child.push(item);
              res.data[i].child = res.data[i].child.filter(
                (item, index, self) => {
                  return (
                    index ===
                    self.findIndex(t => t.instance.id === item.instance.id)
                  );
                }
              );
            }
          }
        }
      });
      this.tableData = res.data;
      console.log("tableData", this.tableData);
      this.Pagedata.total = res.total;
    },
    formatterTime({ createTime }) {
      return formatTime(createTime);
    },
    async setNodeGpu() {
      if (this.addForm.model == "无") {
        await delGpuModel(this.addForm.nodeName);
      } else {
        await setNodeGpuModel(this.addForm.nodeName, this.addForm.model);
      }
      this.showSet = false;
      this.getData();
    },
    async getGpus() {
      let ret = await getAllGpuModel();
      this.allGpus = ret.data;
      this.allGpus.push({ model: "无" });
    },
    async del({ id }) {
      await delGpuModel({ id });
      this.getData();
    },
    openSetGPU(node) {
      console.log("node", node);
      this.addForm = { nodeName: node.name };
      this.showSet = true;
    }
  }
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.child_tab_box {
  width: 100%;
  padding: 10px 40px;
  box-sizing: border-box;
}
</style>
